<!-- 这里做封装一个item 就是图片加文字的组建 -->
<template>
  <div id="smallbox" @click="itemclick">
      <div class="one" v-if="!active" ><slot name="img"></slot></div>
      <div class="one" v-else><slot name="redimg"></slot></div>
      <div :class="{two:active}"><slot name="text"></slot></div>
  </div>
</template>

<script>
export default {
    name:"Tabbaritem.vue",
    data () {
        return {

        }
    },
    props:{
          path:String
    },
      computed: {
         active:{
            //   this.$route.path获取当前路由的值 this.path是props(父传子)接收的值 
            //   
            get(){
                    return  this.$route.path.indexOf(this.path) !==-1
            },
            set(val){
                   console.log(1111)
            }
          },
    },
    methods: {
         itemclick(){
               this.$router.push(this.path)
               this.active=!this.active
         }
    }
}

</script>
<style  scoped>
    #smallbox{
         flex: 1;
         text-align: center;
         
     }
    img{
        width: 25px;
        height: 25px;
        margin-top: 5px;
        vertical-align: middle;
    }
    .two{
         color: red;
    }

</style>